//init file event
//
var filedrag = null;
var fileselect = null;
var filedragUpdate = null;
var fileselectUpdate = null;
var id;
function addProduct() {
    registerEvent();
}

function updateProductEvent(position) {
    id = position;
    registerEventUpdate();
}
//
//function init() {
//    var file = document.getElementById("file");
//    var fileDrag = document.getElementById("filedrag");
//
//    //Register event for file
//    file.addEventListener("change", FileSelectHandler, false)
//}

function registerEvent() {
     
    filedrag = document.getElementById("filedrag");

  

    filedrag.addEventListener("dragover", FileDragHover, false);
    filedrag.addEventListener("dragleave", FileDragHover, false);
    filedrag.addEventListener("drop", FileSelectHandler, false);
  

    fileselect = document.getElementById("filesToUpload");
    fileselect.addEventListener("change", FileSelectHandler, false);
   

}


function registerEventUpdate() {


        filedragUpdate = document.getElementById("filedragUpdate_"+id);
        fileselectUpdate = document.getElementById("filesToUploadUpdate_"+id);


        filedragUpdate.addEventListener("dragover", FileDragHoverUpdate, false);
        filedragUpdate.addEventListener("dragleave", FileDragHoverUpdate, false);
        filedragUpdate.addEventListener("drop", FileSelectHandlerUpdate, false);


        fileselectUpdate.addEventListener("change", FileSelectHandlerUpdate, false);

}

//FileDragHover Event
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

function FileSelectHandler(e) {
    FileDragHover(e);
    //get files
    var files = e.target.files || e.dataTransfer.files;

    //send file to server
    for (var i = 0; i < files.length; i++) {
        proccessFile(files[0]);
        uploadImage(files[0]);
    }
}

//handle file using FileReader API
function proccessFile(file) {
    if (file.type == "image/jpeg" || file.type == "image/png") {
        var reader = new FileReader();

        //Save filename to div
        document.getElementById("namePicture").value = file.name;
        //after file is read
        reader.onload = finishRead;

        reader.readAsDataURL(file);
    }
   
}

//Assign file to image
function finishRead(e) {
    //    var newImage = document.createElement("img");
    //    newImage.src = e.target.result;
    
    var divImage = document.getElementById("resultImage");

    divImage.src = e.target.result;
    divImage.hidden = false;

}

function uploadImage(file) {
    var url = "../adminproduct/uploadImage.html";
    var xmlHttpRequest = getXMLObject();
    if (xmlHttpRequest.upload && (file.type == "image/jpeg" || file.type == "image/png")) {
        var formData = new FormData();
        formData.append("file", file);
        formData.append("fileName", file.name);
        xmlHttpRequest.open("POST", url, true);
        xmlHttpRequest.send(formData);
    } else {
        alert("Please choose image file(jpeg or png)!");
    }
}

function FileDragHoverUpdate(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

function FileSelectHandlerUpdate(e) {
    FileDragHover(e);
    //get files
    var files = e.target.files || e.dataTransfer.files;

    //send file to server
    for (var i = 0; i < files.length; i++) {
        proccessFileUpdate(files[0]);
        uploadImageUpdate(files[0]);
    }
}

//handle file using FileReader API
function proccessFileUpdate(file) {
    if (file.type == "image/jpeg" || file.type == "image/png") {
        var reader = new FileReader();

        //Save filename to div
        document.getElementById("namePictureUpdate_"+id).value = file.name;
        //after file is read
        reader.onload = finishReadUpdate;

        reader.readAsDataURL(file);
    }

}

//Assign file to image
function finishReadUpdate(e) {
    //    var newImage = document.createElement("img");
    //    newImage.src = e.target.result;
    var divImageUpdate = document.getElementById("resultImageUpdate_"+id);

    divImageUpdate.src = e.target.result;
    divImageUpdate.hidden = false;
}

function uploadImageUpdate(file) {
    var url = "../adminproduct/uploadImage.html";
    var xmlHttpRequest = getXMLObject();
    if (xmlHttpRequest.upload && (file.type == "image/jpeg" || file.type == "image/png")) {
        var formData = new FormData();
        formData.append("file", file);
        formData.append("fileName", file.name);
        xmlHttpRequest.open("POST", url, true);
        xmlHttpRequest.send(formData);
    } else {
        alert("Please choose image file(jpeg or png)!");
    }
}
